<template>
    <div class="box">
        <ul>
            <li  v-for='(item,index) in liList' :key="index">
                <a :href="item.url">
                    <img :src="num == item.url ? item.cSrc : item.src" alt="">
                    <p class="name" :class="num == item.url ? 'active' : ''">{{item.name}}</p>
                </a> 
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data:function(){
        return{
            num:0,
            liList:[{
                name:'首页',
                src:require('@/assets/images/icon/home.png'),
                cSrc:require('@/assets/images/icon/home-act.png'),
                url:'/mjd'
            },{
                name:'分类',
                src:require('@/assets/images/icon/view.png'),
                cSrc:require('@/assets/images/icon/view-act.png'),
                url:'/category'
            },{
                name:'购物车',
                src:require('@/assets/images/icon/cart.png'),
                cSrc:require('@/assets/images/icon/cart-act.png'),
                url:'/cart'
            },{
                name:'未登录',
                src:require('@/assets/images/icon/user.png'),
                cSrc:require('@/assets/images/icon/user-act.png'),
                url:'/user'
            }]
        }
    },
    mounted:function(){
        // console.log(this.$router)
        // console.log(this.$route)
        this.num = this.$route.path
    }
}
</script>

<style lang="less" scoped   >
    .box{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 50px;
        background: white;
        border-top: 1px solid rgba(0,0,0,0.1);
        box-sizing: border-box;
        z-index: 9;

        ul{
            width: 100%;
            list-style: none;
    
            li{
                width: 25%;
                float: left;
                line-height: 50px;
                position: relative;

                img{
                    position: absolute;
                    width: 28px;
                    top: 1px;
                    left: calc(50% - 14px);

                }
                .name{
                    padding-top:12px; 
                    font-size: 12px;
                }
            }
        }
    }
    .active{
        color: red;
    }
    a{
        text-decoration: none;
        color: black;
    }
</style>